<template>
    <el-row justify="space-around" align="middle" class="navigation-bar">
        <div />
        <el-input v-model="input" placeholder="请输入内容" class="search"></el-input>
        <el-row class="user">
            <el-image class="avatar" :src="url" fit="fill"></el-image>
        </el-row>
    </el-row>
</template>
<script>
    import { defineComponent, ref } from 'vue'
    export default defineComponent({
        setup() {
            return {
                input: ref(''),
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },
    })
</script>
<style scoped lang="less">
    .navigation-bar {
        .search {
            max-width: 400px;
        }
        .user {
            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
    }
</style>
